清除浮动：规定元素哪一侧不能有浮动元素
1、 clear:left; 元素左侧不能有浮动元素
2、 clear:right; 元素右侧不能有浮动元素
3、 clear:both；元素左右两侧都不能有浮动元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="rerest.css">
<!--引入是为了去盒子边距-->
<style type="text/css">
ul li { list-style-type: none;}
ul{width:300px;margin:50px auto; background:#f2f2f2;
color:white;font-size:30px;text-align:center;line-height:100px;}
li{width:100px;height:100px; float:left}
.a{background:red;height:100px;}
.b{background:green;}
.c{background:blue;}
</style>
</head>
<body>
<!--ul>li*3-->
<ul>
<li class="a">1</li>
<li class="b">2</li>
<li class="c">3</li>
</ul>
</body>
</html>
返回值：
.a{background:red;height:100px;clear:left}
.b{background:green;}
.c{background:blue;}
返回值同上
.a{background:red;height:100px;}
.b{background:green;clear:left;}
.c{background:blue;}
返回值
.a{background:red;height:100px;}
.b{background:green;}
.c{background:blue;clear:left;}
用both来代替left，得到的结果是一样的
.a{background:red;height:100px;}
.b{background:green;clear:both;}
.c{background:blue;}
